<template>
  <div class="xjjl-detail">
    <!-- 基础信息 -->
    <div class="page-header jcxx">
      <div class="title">基础信息</div>
      <div class="same-item">
        <div class="title">巡检时间</div>
        <div class="value">{{ xjInfo.inspection.inspectionTime }}</div>
      </div>
      <div class="same-item">
        <div class="title">巡检场所</div>
        <div class="value dsh">{{ xjInfo.inspection.placeName }}</div>
      </div>
      <div class="same-item">
        <div class="title">巡检房源</div>
        <div class="value">{{ xjInfo.inspection.roomName }}</div>
      </div>
      <div class="same-item">
        <div class="title">巡检部门</div>
        <div class="value">{{ xjInfo.inspection.department }}</div>
      </div>
    </div>
    <!-- 房间问题 -->
    <div class="page-header fjwt">
      <div class="title">房间问题</div>
      <div class="same-item">
        <div class="title">问题描述</div>
        <div class="value">{{ xjInfo.inspection.roomProblem }}</div>
      </div>
      <div class="same-item">
        <div class="title">图片</div>
        <div class="value">
          <van-image
            width="80"
            height="80"
            style="margin-right: 5px;"
            :src="'/api' + item.filename"
            v-for="item in xjInfo.inspection.inspFiles" :key="item.id"
            @click="imagePrevel(item.filename)"
          />
        </div>
      </div>
    </div>
    <!-- 场所问题 -->
    <div class="page-header cswt">
      <div class="title">场所问题</div>
      <van-steps direction="vertical" :active="-1">
        <van-step>
          <h3>加扣分明细</h3>
          <div class="other-info" v-for="(item, index) in xjInfo.scoreRecords" :key="index">
            <div class="detail-same-item">
              <div class="title">类型</div>
              <div class="value">{{ item.scoreType }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title">加分规则</div>
              <div class="value">{{ item.scoreItem }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title">加分说明</div>
              <div class="value">{{ item.scoreRemark }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title">分值</div>
              <div class="value">{{ item.score }}分</div>
            </div>
          </div>
        </van-step>
        <!-- <van-step>
          <h3>问题反馈</h3>
          <div class="other-info">
            <div class="detail-same-item">
              <div class="title">问题类型</div>
              <div class="value">问题治理</div>
            </div>
            <div class="detail-same-item">
              <div class="title">问题内容</div>
              <div class="value">场所卫生条件不好。</div>
            </div>
            <div class="detail-same-item">
              <div class="title">图片</div>
              <div class="value"></div>
            </div>
          </div>
        </van-step> -->
        <van-step>
          <h3>挂牌</h3>
          <div class="other-info" v-if="xjInfo.inspection">
            <div class="detail-same-item">
              <div class="title">挂牌类型</div>
              <div class="value">{{ xjInfo.inspection.cardType }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title">挂牌规则</div>
              <div class="value">{{ xjInfo.inspection.cardItem }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title">挂牌说明</div>
              <div class="value">{{ xjInfo.inspection.cardBz }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title spec-title">整改开始时间</div>
              <div class="value">{{ xjInfo.inspection.rectStartTime }}</div>
            </div>
            <div class="detail-same-item">
              <div class="title spec-title">整改结束时间</div>
              <div class="value">{{ xjInfo.inspection.rectEndTime }}</div>
            </div>
          </div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { inspectionDetail } from '@/api/xjgl';
export default {
  name: 'zcjl-detail',
  data() {
    return {
      id: '',
      xjInfo: {
        inspection: {}, // 巡检信息
      }
    }
  },
  created() {
    if(this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.inspectionDetail()
  },
  methods: {
    inspectionDetail() {
      inspectionDetail(this.id).then(res => {
        // console.log(res)
        if(res.code == 200) {
          this.xjInfo = res.data.data;
        }
      })
    },
    imagePrevel(item) {
      ImagePreview(['/api' + item])
    },
  }
}
</script>

<style lang="less" scoped>
.xjjl-detail {
  background: #F5F5F5;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .page-header {
    background-color: #fff;
    padding: 16px;
    box-sizing: border-box;
    > .title {
      color: rgba(51,51,51,1);
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: left;
      margin-bottom: 8px;
    }
    .same-item {
      display: flex;
      align-items: center;
      font-weight: normal;
      font-size: 12px;
      .title {
        width: 70px;
        color: #666666;
      }
      .value {
        width: calc(100% - 70px);
      }
      .title, .value {
        font-weight: normal;
        line-height: 22px;
        text-align: left;
      }
    }
  }
  .jcxx {
    background-color: #fff;
    padding: 16px;
    box-sizing: border-box;
    .title {
      color: rgba(51,51,51,1);
      font-family: PingFang SC;
      font-weight: bold;
      letter-spacing: 0px;
      text-align: left;
    }
    .same-item {
      margin-bottom: 8px;
      .value {
        color: rgba(51,51,51,1);
      }
      .dsh {
        color: #FF8F1F;
      }
    }
  }
  .fjwt {
    margin-top: 12px;
    .same-item {
      align-items: flex-start;
    }
  }
  .cswt {
    /deep/ .van-step__title {
      text-align: left;
      color: #333333;
      font-size: 13px;
    }
    .other-info {
      border: 1px solid #f1f1f1;
      padding: 0 6px;
      border-radius: 8px;
      margin-top: 8px;
      background-color: #a3e5e8a7;
      .detail-same-item {
        font-size: 12px;
        display: flex;
        align-items: flex-start;
        margin-top: 8px;
        .title {
          margin-right: 12px;
          width: 60px;
          color: #666666;
        }
        .spec-title {
          width:90px;
        }
        .value {
          width: calc(100% - 72px);
          color: #333333;
        }
      }
    }
  }
}
</style>